import { Link, useLocation } from "react-router-dom/cjs/react-router-dom.min";
import DataContext from "./context/DataContext";
import { useContext } from "react";
const Header = () => {
  const location = useLocation();
  const { isLoggedIn, loginUserId, keyword, setKeyword } = useContext(DataContext);
  return (
    <div className="container">
      <nav className="navbar navbar-expand-lg">
        <span className="navbar-brand">
          <div className="d-flex align-items-end text-primary">
            <Link className="text-decoration-none fs-1" to="/">
              <i className="bi bi-broadcast-pin mx-2"></i>
            </Link>
            <span className="ms-1 mb-1 lead fs-2">雨呓</span>
          </div>
        </span>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleContent">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-end align-items-center fs-5 mt-2 ms-1 lead" id="navbarToggleContent">
          {location.pathname === "/podcasts" &&
            <div className="flex me-2">
              <input className="form-control" type="search" placeholder="Search" value={keyword} onChange={(e) => { setKeyword(e.target.value); }} aria-label="Search"></input>
            </div>
          }
          <ul className="navbar-nav">
            <li className="nav-item">
              <Link className="nav-link text-primary" to="/podcasts">播客</Link>
            </li>
          </ul>
          <ul className="navbar-nav">
            <li className="nav-item">
              <Link className="nav-link text-primary" to={!isLoggedIn ? "/login" : `/users/${loginUserId}`}>我的</Link>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Header;
